<template>
  <div class="child-inline-block footer">
      <div v-for="(item, index) in navs" :key="index" class="footer-box">
          <span>{{item.label}}</span>
          <ul>
              <li v-for="(child, index) in item.children" :key="index">
                  <a href="#">{{child.label}}</a>
              </li>
          </ul>
      </div>
      <hr>  
  </div>
</template>

<script>
import navs from '@/assets/nav.json'
export default {
    data(){
        return {
            navs: navs,
            others: [{
                label: '关于海尔'
            }, {
                label: '法律声明'
            }, {
                label: '联系我们'
            }, {
                label: '帮助中心'
            }, {
                label: "海尔门店"
            }]
        }
    }
}
</script>

<style scoped>
.footer{
    margin-left: 5%;
    margin-right: 5%;
    text-align: center;
    background: #F6F7F9;
}

hr{
    color: black;
}

.footer-box{
    position: relative;
    height: 360px;
}

.footer-box{
    width: 20%;
    text-align: center;
}

.footer-box > span{
    padding-top: 20px;
    display: inline-block;
    font-weight: bold;
    font-size: 1em;
    padding-bottom: 20px;
}

.footer-box ul{
    position: absolute;
    left: 0;
    right: 0;
}

.footer-box li{
    font-size: 0.9em;
    padding-bottom: 10px;
}

.footer-box a{
    color: black;
    text-decoration: none;
}

.footer-box a:hover{
    text-decoration-line: underline;
    text-decoration-color: black;
}

.footer-bottom *{
    text-align: left;
}

</style>